<script setup>
import { ref, inject, computed } from 'vue'

// 参数
const props = defineProps({
  // 标题
  title: {
    type: String,
    default: '',
  },
  // 字体颜色
  titleColor: {
    type: String,
    default: '#333',
  },
  // 标题大小-rpx
  titleSize: {
    type: [String, Number],
    default: '32',
  },
  // 图标颜色-有设置就用图标颜色，否则就用字体颜色
  iconBackColor: {
    type: String,
    default: '#333',
  },
  // 图标名称
  iconBackName: {
    type: String,
    default: 'nav-back',
  },
  // 图标大小-rpx
  iconBackSize: {
    type: [String, Number],
    default: 50,
  },
  // 导航栏样式-背景颜色
  navStyle: {
    type: Object,
    default() {
      return {
        background: '#F8F8F8',
      }
    },
  },
  // 是否固定定位
  navFixed: {
    type: Boolean,
    default: false,
  },
  // 默认导航栏高度-rpx
  navHeight: {
    type: Number,
    default: 44,
  },
  // 是否显示左侧内容
  navBack: {
    type: Boolean,
    default: true,
  },
  // 自定义返回逻辑
  navCustomBack: {
    type: Function,
    default: null,
  },
  // 内容样式
  mainStyle: {
    type: Object,
  },
  // 显示加载
  loading: {
    type: Boolean,
    default: false,
  },
  // 显示模拟框
  showModal: {
    type: Boolean,
    default: false,
  },
  // 播放器数据和方法
  playerStore: {
    type: Object,
    default: () => ({}),
  },
})

// 获取模拟框配置
const { modal, updateNavBarHeight } = inject('common', null)
// 屏幕高度
const screenHeight = ref(0)
// 导航栏高度
const navBarHeight = ref(props.navHeight)
// 页面样式-变量
const pageStyle = computed(() => {
  let style = {
    '--screen-height': `${screenHeight.value}px`,
    '--navbar-height': `${navBarHeight.value}px`,
    '--cover-pic': `url(${props.playerStore.playerInfo.pic || ''})`,
  }
  return style
})

// 获取导航栏高度
const getNavBarHeight = (height, innerHeight, windowInfo) => {
  navBarHeight.value = height
  screenHeight.value = windowInfo.screenHeight
  updateNavBarHeight(height)
}
</script>

<template>
  <!-- 总组件 -->
  <view
    class="page"
    :style="pageStyle"
  >
    <!-- 导航 -->

    <ty-nav-bar
      :title="title"
      :nav-style="navStyle"
      :title-color="titleColor"
      :title-size="titleSize"
      :icon-back-color="iconBackColor"
      :icon-back-name="iconBackName"
      :icon-back-size="iconBackSize"
      :fixed="navFixed"
      :is-back="navBack"
      :custom-back="navCustomBack"
      :height="navHeight"
      @get-height="getNavBarHeight"
    >
      <slot name="nav"></slot>
      <template #right><slot name="navRight"></slot></template>
    </ty-nav-bar>
    <!-- 主体内容 -->
    <view
      class="main"
      :style="[mainStyle]"
    >
      <slot></slot>
    </view>
    <!-- 播放器 -->
    <ty-player
      :player-info="playerStore.playerInfo"
      :player-status="playerStore.playerStatus"
      :player-queue="playerStore.playerQueue"
      :loading="playerStore.loading"
      @init="playerStore.initPlayer"
      @switch="playerStore.switchPlayer"
      @pause="playerStore.setPlayerPause"
      @play="playerStore.setPlayerPlay"
      @prev="playerStore.setPlayerPrev"
      @next="playerStore.setPlayerNext"
      @cut-song="playerStore.setPlayerInfo"
      @seek="playerStore.setSeek"
      @playback-rate="playerStore.setPlaybackRate"
      @player-mode="playerStore.setPlayerMode"
      @queue-song="playerStore.setPlayerInfo"
      @del-queue="playerStore.setDelShareQueue"
      @clear-queue="playerStore.clearQueue"
      @like-song="playerStore.setLikeSong"
    ></ty-player>
    <!-- 显示加载 -->
    <slot name="loading">
      <ty-loading :show="loading"></ty-loading>
    </slot>
    <!-- modal模拟框 -->
    <u-modal
      v-model="modal.status.showModal"
      :title="modal.status.modalTitle"
      show-cancel-button
      :confirm-text="modal.status.confirmText"
      :content="modal.status.content"
      @confirm="modal.confirm"
    ></u-modal>
  </view>
</template>

<style lang="scss" scoped>
.page {
  @include ty-flex-col;
  height: 100vh;
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
}

.main {
  @include ty-flex-col;
  flex: 1;
  overflow: hidden;
  position: relative;
}
</style>
